<template>
  <div class="moldkey">
    <div class="yaogan"></div>
    <div class="btn upkey" :class="{ pressedY: direction.up }" tabindex="0">
      ↑
    </div>
    <div class="btn leftkey" :class="{ pressed: direction.left }" tabindex="0">
      ←
    </div>
    <div class="btn downkey" :class="{ pressedY: direction.down }" tabindex="0">
      ↓
    </div>
    <div
      class="btn rightkey"
      :class="{ pressed: direction.right }"
      tabindex="0"
    >
      →
    </div>
  </div>
</template>

<script>
export default {
  props: {
    directionY: {
      type: String,
      default: () => "1",
    },
    directionX: {
      type: String,
      default: () => "1",
    },
  },
  data() {
    return {
      direction: {
        up: false,
        down: false,
        left: false,
        right: false,
      },
    };
  },
  watch: {
    directionY(newVal, oldVal) {
      if (newVal > 0) {
        this.direction.up = false;
        this.direction.down = true;
      } else if (newVal == 0) {
        this.direction.up = false;
        this.direction.down = false;
      } else {
        this.direction.up = true;
        this.direction.down = false;
      }
    },
    directionX(newVal, oldVal) {
      if (newVal > 0) {
        this.direction.left = false;
        this.direction.right = true;
      } else if (newVal == 0) {
        this.direction.left = false;
        this.direction.right = false;
      } else {
        this.direction.left = true;
        this.direction.right = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.moldkey {
  width: 200px;
  height: 200px;
  border-image-source: url("../../../src/assets/images/gamebg.png");
  border-image-slice: 90 fill; /* 设置图像边框的分割方式 */
  border-image-width: 50px; /* 设置边框宽度 */
  border-image-outset: 10; /* 设置边框扩展区域的大小 */
  border-image-repeat: stretch; /* 设置图像边框的重复方式 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  .yaogan {
    width: 60px;
    height: 120px;
    background-image: url("../../assets/images/yaoganzd.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  background-color: #606e7d;
  position: absolute;
  font-size: 24px;

  &:focus {
    outline: none;
  }

  &.pressed {
    transform: translateY(-50%);
    background-color: #58de36;
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  &.pressedY {
    opacity: 1;
    background-color: #58de36;
    transform: translateX(-50%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
}
.upkey {
  top: 12%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
}

.leftkey {
  left: 12%;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%);
}

.downkey {
  bottom: 12%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
}

.rightkey {
  right: 12%;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%);
}
</style>
